<!--
 * @description 图标组件
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 -->
<template>
	<view
		class="pure-icon"
		:class="_classes"
		:style="_styles"
		:hover-class="$attrs.hoverClass || $attrs['hover-class']"
	>
		<!-- 字体图标 -->
		<view
			class="pure-icon__font"
			:class="_fontClasses"
			v-if="!_isImage"
		></view>
		<!-- 图片图标 -->
		<image class="pure-icon__image" :src="name" :mode="mode" v-else></image>
	</view>
</template>

<script>
import commonComponentOptions from "../../config/common-component-options";
export default {
	options: commonComponentOptions,
};
</script>

<script setup>
import { ref, computed } from "vue";
import props from "./props.js";

// **************************************************************************************************************
// * Options
// **************************************************************************************************************
defineOptions(commonComponentOptions);

// **************************************************************************************************************
// * Props
// **************************************************************************************************************
const _props = defineProps(props);

// **************************************************************************************************************
// * Emits
// **************************************************************************************************************
const _emits = defineEmits([]);

// **************************************************************************************************************
// * Classes
// **************************************************************************************************************
const _classes = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Styles
// **************************************************************************************************************
const _styles = computed(() => {
	const array = [];
	return array;
});

// **************************************************************************************************************
// * Computed
// **************************************************************************************************************
// 是否是图片图标
const _isImage = computed(() => {
	return _props.name?.includes?.("/");
});

// 字体图标的类名
const _fontClasses = computed(() => {
	const array = [];

	// 是图片图标
	if (_isImage.value) return array;

	// 是内置图标
	if (_props.name?.startsWith?.("__")) {
		array.push(`pure-iconfont pure-iconfont${_props.name}`);
		return array;
	}

	// 是扩展字体图标
	array.push(_props.name);

	return array;
});

// **************************************************************************************************************
// * Functions
// **************************************************************************************************************
</script>

<style scoped lang="scss">
@import "./iconfont.css";
@import "./style.scss";
</style>
